<script setup>
import { onMounted, reactive } from "vue";
import { gethouseListApi, delhouseApi } from "@/api/house.js";
import { useCommunityList, Time, formatTime } from "@/hooks/index.js";
import { ElMessage } from "element-plus";
import addForm from './addForm.vue';
const cateList = useCommunityList()
const addRef = ref();

// ================================
// --------------------------------列表功能------
const queryData = reactive({
  current: 1,
  pageSize: 10,
  create_time: '',
  community_code: '',
  name: '',
});
const count = ref(0)
const list = ref([])
const initData = async () => {
  let { data } = await gethouseListApi(toRaw(queryData))
  count.value = data.count
  list.value = data.rows
};
onMounted(() => {
  initData()
})

// 每页数量切换
const sizeChange = (val) => {
  queryData.pageSize = val;
  initData();
};
// 页码切换
const currentChange = (val) => {
  queryData.current = val;
  initData();
};
// 搜索确定
const onSearch = () => {
  queryData.current = 1;
  queryData.create_time = queryData.create_time !== '' ? formatTime(queryData.create_time).join(',') : ''
  initData();
};
// // 搜索取消
const onReset = () => {
  Object.assign(queryData, {
    current: 1,
    pageSize: 10,
    create_time: '',
    community_code: '',
    name: '',
  });
  initData();
};
// ==============
// --------------------------------修改功能------
const editRow = (id) => {
  addRef.value.replyData(id);
};
// ==========================================
// --------------------------------删除功能------
const delRow = async (id) => {
  await delhouseApi(id)
  ElMessage.success('删除成功')
  if (queryData.current > 1 && list.value.length === 1) queryData.current--
  initData()
}
</script>
<template>
  <div class="app-container">
    <p style="font-size: 14px;"><b style="font-size: 20px;">楼栋管理</b> 用于展示小区里每一栋的基础信息</p>
    <el-card style="margin-bottom: 15px;">
      <!-- 搜索区域 -->
      <el-form label-position="top" :inline="true">
        <el-row>
            <el-form-item style="width: 250px;" label="小区名称">
              <el-select v-model="queryData.community_code" size="large">
                <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 250px;"  label="栋数名称">
              <el-input v-model="queryData.name" size="large"></el-input>
            </el-form-item>
            <el-form-item style="width: 350px;"  label="创建时间">
              <el-date-picker size="large" v-model="queryData.create_time" type="daterange" unlink-panels range-separator="至"
                start-placeholder="开始时间" end-placeholder="结束时间" />
            </el-form-item>
            <el-form-item style="width: 190px; padding-top: 35px;"  class="block">
              <el-button type="primary" @click="onSearch">搜索</el-button>
              <el-button @click="onReset">重置</el-button>
            </el-form-item>
        </el-row>
      </el-form>
    </el-card>

    <el-card>
      <!-- 工具区域 -->
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button type="primary" @click="addRef.isShow = true">新增</el-button>
        </div>
      </el-row><br>
      <!-- 表格区域 -->
      <el-table :data="list" stripe>
        <el-table-column prop="code" label="栋数编号"></el-table-column>
        <el-table-column label="小区名称">
          <template #default="{ row }">
            {{ row.community?.name }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="栋数名称"></el-table-column>
        <el-table-column prop="lift" label="电梯数">
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间">
          <template #default="{ row }">
            {{ Time(row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" text @click="editRow(row.id)">编辑</el-button>
            <el-popconfirm title="确认删除吗？" @confirm="delRow(row.id)">
              <template #reference>
                <el-button type="text" text>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table><br>
      <!-- 分页区域 -->
      <el-pagination @size-change="sizeChange" @current-change="currentChange" v-model:current-page="queryData.current"
         v-model:page-size="queryData.pageSize"
         layout="total, prev, pager, next" :total="count" background>
      </el-pagination>
      <!-- 新增修改组件 -->
      <addForm ref="addRef" @updateList="initData" />
    </el-card>
  </div>
  <el-from label-width="80px" style="text-align: center;">
    <div>Ant Design divro黑马前端合肥前端欢迎您</div>
    <div>© 2023 悦兴物业集团</div>
    <br>
  </el-from>
</template>
<style  scoped>
</style>